<template>
  <el-row style="margin-bottom:50px">
    <div style="font-weight:900">其它系统</div>
  </el-row>
  <el-row>
    <el-row :gutter="24" style="margin-bottom:20px">
      <el-col :span="12">
        <el-button class="one"><i class="el-icon-chat-line-round"></i></el-button>
        <div class="system">系统名称</div>
      </el-col>
      <el-col :span="12">
        <el-button class="two"><i class="el-icon-discover"></i></el-button>
        <div class="system">系统名称</div>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top:30px">
      <el-col :span="12">
        <el-button class="three"><i class="el-icon-setting"></i></el-button>
        <div class="system">系统名称</div>
      </el-col>
      <el-col :span="12">
        <el-button class="four"><i class="el-icon-menu"></i></el-button>
        <div class="system">系统名称</div>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.one {
  background-color: #ff7859;
  width: 120px;
  height: 120px;
  color: #ffffff;
  font-size: 55px;
  margin-right: 2em;
}
.two {
  background-color: #ffc63c;
  width: 120px;
  height: 120px;
  color: #ffffff;
  font-size: 55px;
}
.three {
  background-color: #5ba3ed;
  width: 120px;
  height: 120px;
  color: #ffffff;
  font-size: 55px;
  margin-right: 2em;
}
.four {
  background-color: #40b99b;
  width: 120px;
  height: 120px;
  color: #ffffff;
  font-size: 55px;
}
.borderone {
  position: absolute;
  left: 139px;
  top: 90px;
  width: 1px;
  height: 130px;
  background-color: #dddddd;
}
.bordertwo {
  position: absolute;
  top: -20px;
  left: 75px;
  background-color: #dddddd;
  width: 130px;
  height: 1px;
}
.system {
  width: 120px;
  text-align: center;
  color: #999999;
  font-size: 12px;
  margin-top: 12px;
}
</style>